<template>
  <div>
    <div class="buttom" @click="addInfo()">
      <slot></slot>
    </div>
    <el-drawer title="添加文章" direction="rtl" destroy-on-close :before-close="handleClose" :visible="drawer" width="70%">
      <el-form label-position="right" ref="formName" label-width="80px" :model="formLabelAlign">
        <el-form-item label="标题">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="formLabelAlign.tag" placeholder="请选择">
            <el-option v-for="item in subjeList" :key="item.subjectId" :label="item.subjectName" :value="item.subjectId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <div style="border: 1px solid #ccc;">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor style="height: 500px; overflow-y: hidden;" v-model="formLabelAlign.content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" @click="submit">发布文章</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import Vue from 'vue'
import { inset } from '@/api/post'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getSubject } from '@/api/subject'
export default Vue.extend({
  props: {
    // subjeList: { type: Array, default: [] },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Editor,
    Toolbar
  },
  data() {
    return {
      drawer: false,
      subjeList: [],
      formLabelAlign: {
        title: '',
        tag: '',
        content: ''
      },
      course: [],
      editor: null,
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {
    this.getSubjectfn()
    this.drawer = this.isShow
  },
  methods: {
    getSubjectfn() {
      getSubject().then(res => {
        if (res.data) {
          this.subjeList = res.data
        }
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    submit() {
      const { schoolId, userId } = this.$store.state.user.profile
      const data = { ...this.formLabelAlign, schoolId, userId }
      inset(data).then(res => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.$emit('addChange')
        }
      })
    },
    addInfo() {
      this.drawer = true
    },
    closeFn(formName) {
      this.formLabelAlign = {
        title: '',
        subjectId: '',
        content: ''
      }
      this.drawer = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.closeFn()
          done()
        })
        .catch(_ => {})
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>

<style lang="less" scoped>
.buttom {
  width: 100%;
}
::v-deep .el-drawer {
  width: 97% !important;
}
</style>